<template>
  <div>
    <el-tabs   v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane  label="未审核" name="1">
        <el-table
          v-loading="loadingNoCheck"
          element-loading-text="拼命加载中"
          :data="workList"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="workTimeStr"
            label="时间"
            width="130">
          </el-table-column>
          <el-table-column
            prop="workContext"
            label="工作内容"
            width="120">
          </el-table-column>
          <el-table-column
            prop="workCount"
            width="120"
            label="工作量">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-row>
                <el-button icon="el-icon-search" @click="btnNoCheckDetail(scope.row.userName,scope.row.nextDayPlan)" size="small">查看详情</el-button>
                <el-button type="success" icon="el-icon-check" @click="checkPass(scope.row.id)"  size="small">通过</el-button>
                <el-button type="danger" icon="el-icon-delete"  @click="checkNoPass(scope.row.id)" size="small">驳回</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="params.page"
          :page-size="params.size"
          style="float: right;"
          layout="total, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total">
        </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="已审核" name="2">
        <el-table
          v-loading="loadingChecked"
          element-loading-text="拼命加载中"
          :data="workList"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="workTimeStr"
            label="时间"
            width="150">
          </el-table-column>
          <el-table-column
            prop="workContext"
            label="工作内容"
            width="150">
          </el-table-column>
          <el-table-column
            prop="workCount"
            width="120"
            label="工作量">
          </el-table-column>
          <el-table-column
            prop="workStateId"
            width="140"
            label="审核结果">
            <template slot-scope="scope">
            <span v-if="scope.row.workStateId == '1'">
              经理审核中
            </span>
              <span v-if="scope.row.workStateId == '2'">
                审核通过
            </span>
              <span v-if="scope.row.workStateId == '3'">
                审核驳回
            </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="350"
          >
            <template slot-scope="scope">
              <el-row>
                <el-button icon="el-icon-search" @click="btnCheckedDetail(scope.row.workStateId,scope.row.checkInfo)"  size="small">查看详情</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="params.page"
          :page-size="params.size"
          style="float: right;"
          layout="total, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog  width="300px"  title="工作详情" :visible.sync="noCheckDetailVisible">
      <el-form>
        <el-row>
          <el-col  span="10">
            <span>姓名：</span>
          </el-col>
          <el-col  span="14">
            <span v-text="userName"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col  span="10">
            <span>明天计划：</span>
          </el-col>
          <el-col span="14">
            <span v-text="nextDayPlan"></span>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="btnNoCheckDetailTrue">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog  width="300px"  title="审核详情" :visible.sync="checkedDetailVisible">
      <el-form>
        <el-row>
          <el-col  span="10">
            <span>审核状态：</span>
          </el-col>
          <el-col  span="14">
            <span v-text="checkStatus"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col  span="10">
            <span>审核评语：</span>
          </el-col>
          <el-col span="14">
            <span v-text="checkInfo"></span>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="btnCheckedDetailTrue">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog ref="checkIsPass" width="300px" title="审核通过" :visible.sync="checkVisible">
      <div slot="title">
          <span v-text="dialogTitleCheckName"></span>
      </div>
      <el-form>
        <el-row>
          <el-col span="24">
            <el-form-item prop="workContext" label="审核评语：" :label-width="formLabelWidth">
              <el-input type="textarea" size="small" clearable
                        v-model="checkPassInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="btnCheckedPassTrue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as workApi from '../api/work'
  export default {
    data() {
      return {
        dialogTitleCheckName: '审核通过',
        userName: '',
        nextDayPlan: '',
        noCheckDetailVisible: false,
        checkedDetailVisible: false,
        checkVisible: false,
        checkStatus: '',
        checkInfo: '',
        workList: [],
        personName: '',
        crop: '',
        cropList: [],
        total: 0,
        params: {
          page: 1,
          size: 5
        },
        activeName: '1',
        loadingNoCheck: false,
        loadingChecked: false,
        formLabelWidth: '120px',
        checkPassInfo: '',
        checkPassId : '',
      };
    },
    methods: {
      handleClick(tab, event) {
        this.params.page = 1
        this.selectCheckWorkPage(1,5,this.activeName)
      },
      selectCheckWorkPage(pageNum,pageSize,workStateId){
        this.loadingNoCheck = true
        this.loadingChecked = true
        this.workList = []
        var params = {
          pageNum: pageNum,
          pageSize: pageSize,
          workStateId: workStateId
        }
        workApi.selectCheckWorkPage(params).then((res)=>{
            if(res.success == true){
              this.workList = res.object.list
              this.total = res.object.total
              this.loadingNoCheck = false
              this.loadingChecked = false
            }else {
              this.$router.push("/login");
            }
        })
      },
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.params.size = val
        // 点击每页显示的条数时，显示第一页
        this.selectCheckWorkPage(1, this.params.size,this.activeName)
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.params.page = 1
      },
      handleCurrentChange(val) {
        // 改变默认的页数
        this.params.page = val
        // 切换页码时，要获取每页显示的条数
        this.selectCheckWorkPage(this.params.page, this.params.size,this.activeName)
      },
      btnNoCheckDetailTrue(){
        this.noCheckDetailVisible=false
        this.userName = ''
        this.nextDayPlan = ''
      },
      btnNoCheckDetail(userName, nextDayPlan){
        this.noCheckDetailVisible = true
        this.userName = userName
        this.nextDayPlan = nextDayPlan
      },
      btnCheckedDetailTrue(){
        this.checkedDetailVisible=false
        this.checkStatus = ''
        this.checkInfo = ''
      },
      btnCheckedDetail(checkStatus, checkInfo){
        this.checkedDetailVisible = true
        if(checkStatus == '1'){
          this.checkStatus = '经理审核中'
        }else if(checkStatus == '2'){
          this.checkStatus = '审核通过'
        }else if(checkStatus == '3'){
          this.checkStatus = '审核驳回'
        }
        this.checkInfo = checkInfo
      },
      checkPass(id){
        this.checkVisible = true
        this.checkPassId = id
        this.dialogTitleCheckName = '审核通过'
      },
      checkNoPass(id){
        this.checkVisible = true
        this.checkPassId = id
        this.dialogTitleCheckName = '审核驳回'
      },
      btnCheckedPassTrue(){
        var workStateId  = ''
        if(this.dialogTitleCheckName == '审核通过'){
          workStateId = '2'
        }else if(this.dialogTitleCheckName == '审核驳回'){
          workStateId = '3'
        }
        var params = {
          id: this.checkPassId,
          checkInfo: this.checkPassInfo,
          workStateId: workStateId
        }
        workApi.update(params).then((res)=>{
           if(res.success == true){
             this.$message({
               type: 'success',
               message: res.message
             });
             this.checkVisible = false
             this.selectCheckWorkPage(1,5,1)
             this.checkPassId = ''
             this.checkPassInfo = ''
             this.dialogTitleCheckName = ''
           }else {
             this.$message({
               type: 'error',
               message: res.message
             });
             this.checkVisible = false
             this.selectCheckWorkPage(1,5,1)
             this.checkPassId = ''
             this.checkPassInfo = ''
             this.dialogTitleCheckName = ''
           }
        })
      },
      checkRole(){
        workApi.checkRole().then((res)=>{
          if(res.success == true){
            this.selectCheckWorkPage(1,5,1)
          }else {
            this.$notify.error({
              title: '系统提示',
              message: res.message,
              duration: 3000
            });
            this.$router.push("/workflow/page/work_manage");
          }
        })
      }
    },
    mounted() {
      this.checkRole()
    }
  };
</script>

<style>


</style>
